<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>商品分类列表</title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            div{
                border: 2px solid #fc9829;
                width: 200px;
                border-radius: 10px;
                margin-left: 20px;
                margin-top: 20px;
            }
            ul{
                padding-left: 4px;
                padding-right: 4px;
                list-style-type: none;
            }
            li{
                color: black;
                font-size: 12px;
                
                line-height: 40px;
                height: 40px;
                text-indent: 3.5em;
                
            }
            li a:link{
                color: black;
                text-decoration: none;
            }
            li a:hover{
                color: orange;
            }
            .p1{
                background: url(icon_01.jpg) no-repeat;
                background-size: contain;
                border-bottom: 1px dashed #929292;
            }
            .p2{
                background: url(icon_02.jpg) no-repeat;
                background-size: contain;
                border-bottom: 1px dashed #929292;
            }
            .p3{
                background: url(icon_03.jpg) no-repeat;
                background-size: contain;
                border-bottom: 1px dashed #929292;
            }
            .p4{
                background: url(icon_04.jpg) no-repeat;
                background-size: contain;
                border-bottom: 1px dashed #929292;
            }
            .p5{
                background: url(icon_05.jpg) no-repeat;
                background-size: contain;
                border-bottom: 1px dashed #929292;
            }
            .p6{
                background: url(icon_06.jpg) no-repeat;
                background-size: contain;
                border-bottom: 1px dashed #929292;
            }
            .p7{
                background: url(icon_07.jpg) no-repeat;
                background-size: contain;
                border-bottom: 1px dashed #929292;
            }
            .p8{
                background: url(icon_08.jpg) no-repeat;
                background-size: contain;
                border-bottom: 1px dashed #929292;
            }
            .p9{
                background: url(icon_09.jpg) no-repeat;
                background-size: contain;
                border-bottom: 1px dashed #929292;
            }.p10{
                background: url(icon_10.jpg) no-repeat;
                background-size: contain;
                
            }
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li class="p1"><a href="#"><strong>酒水、饮料</strong></a></li>
                <li class="p2"><a href="#"><strong>进口食品</strong></a></li>
                <li class="p3"><a href="#"><strong>休闲零食</strong></a></li>
                <li class="p4"><a href="#"><strong>地方特产</strong></a></li>
                <li class="p5"><a href="#"><strong>保健、冲调</strong></a></li>
                <li class="p6"><a href="#"><strong>粮油、生鲜</strong></a></li>
                <li class="p7"><a href="#"><strong>美容洗护</strong></a></li>
                <li class="p8"><a href="#"><strong>清洁洗涤</strong></a></li>
                <li class="p9"><a href="#"><strong>母婴、纸品</strong></a></li>
                <li class="p10"><a href="#"><strong>家居百货</strong></a></li>
            </ul>
        </div>
    </body>
</html>